import * as React from 'react';
import { Modal, Form, Input, Rate } from 'antd';
import { FormComponentProps } from 'antd/lib/form/Form';
import { IAddProps } from './Modal'
const FormItem = Form.Item;

export default class FormComponent extends React.Component<IAddProps & FormComponentProps> {
  constructor(props: IAddProps & FormComponentProps) {
    super(props)
  }
  public rate = (num: number) => {
    if (this.props.book) {
      this.props.book.rate(num)
    }

  }
  public render() {
    const { visible, onCancel, onCreate, form } = this.props;
    const { getFieldDecorator } = form;
    console.log(this.props.book)
    return (
      <Modal
        visible={visible}
        title={this.props.book ? "编辑图书" : "添加新书"}
        okText={this.props.book ? "保存" : "添加"}
        cancelText="取消"
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Form layout="vertical">
          <FormItem label="书名">
            {getFieldDecorator('bookName', {
              rules: [{ required: true, message: '必须填写书名!' }],
              initialValue: this.props.book ? this.props.book.bookName : ''
            })(
              <Input />
            )}
          </FormItem>
          <FormItem label="链接">
            {getFieldDecorator('url', {
              rules: [{ type: 'url', message: '必须是合法链接' }],
              initialValue: this.props.book ? this.props.book.url : ''
            })(
              <Input type="textarea" />
            )}
          </FormItem>
          {
            this.props.book ? <Rate onChange={this.rate} value={this.props.book.star} /> : ''
          }
        </Form>
      </Modal>
    );
  }
}
